<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2019-07-08
  Time: 9:07
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String pash = request.getContextPath();
    String basepash = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + pash + "/";
%>
<html>
<head>
    <base href="<%=basepash%>">
    <%@include file="/publs.jsp"%>
    <title>Title</title>
</head>
<body>
<div id="root">
    <row style="margin: 25px">
        <i-col span="3">
            请选择:<i-select @on-change="onchange" v-model="zuoBiao">
                    <i-option value="1">柱形图</i-option>
                    <i-option value="2">折线图</i-option>
                    <i-option value="3">饼图</i-option>
            </i-select>
        </i-col>
    </row>
    <div id="mains" v-show="shouhiei1" style="width: 1400px;height:500px;margin: 50px"></div>
    <div id="main"  v-show="shouhiei2" style="width: 900px;height:500px;margin: 150px"></div>
    <div id="mainssss" v-show="shouhiei3" style="width: 1400px;height:999px;margin: 20px"></div>

</div>

<script>
    new Vue({
        el:"#root",
        data:{
            name1:[],
            name2:[],
            zuoBiao:1,
            shouhiei1:true,
            shouhiei2:false,
            shouhiei3:false,
        },
        methods:{
            jiaZaiTongJiTus(){
                var myChart = echarts.init(document.getElementById('mains'));

                //第一种图形
                // 指定图表的配置项和数据
                    axios.get("/PaiHangTongJi").then(({data})=>{
                        let name = [];
                        let names = [];
                        for (let i = 0; i < data.obj.length; i++) {
                            name.push(data.obj[i].drugsName);
                            names.push(data.obj[i].number);
                        }
                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption({
                            title: {
                                text: '库存数量'
                            },
                            tooltip: {},
                            legend: {
                                data:['数量']
                            },
                            xAxis: {

                            },
                            yAxis: {
                                data: name
                            },
                            series: [{
                                name: '数量',
                                type: 'bar',
                                data:names
                            }]
                        });
                    })
            },
            asdsadadasd(){
                var myChart = echarts.init(document.getElementById('main'));
                axios.get("/PaiHangTongJi").then(({data})=> {
                    let names = [];
                    let namess = [];

                    for (let i = 0; i < data.obj.length; i++) {
                        names.push(data.obj[i].drugsName);
                        namess.push({value: data.obj[i].number,name:data.obj[i].drugsName})
                    }
                    option = {
                    xAxis: {
                        type: 'value'
                    },
                    yAxis: {
                        type: 'category',
                        boundaryGap: true,
                        data: names
                    },
                    series: [{
                        data: namess,
                        type: 'line',
                        areaStyle: {}
                    }]
                };
                myChart.setOption(option)

                })
            },
            sadasdasdsas(){
                let zhi = [];
                let zhis = []
                var myChart = echarts.init(document.getElementById('mainssss'));
                axios.get("/PaiHangTongJi").then(({data})=> {
                    for (let i = 0; i < data.obj.length; i++) {
                        zhi.push(data.obj[i].drugsName);
                        zhis.push({value: data.obj[i].number,name:data.obj[i].drugsName})
                    }
                    option = {
                        title : {
                            text: '销量排行前十',
                            // subtext: '纯属虚构',
                            x:'center'
                        },
                        tooltip : {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                            data:zhi
                        },
                        series : [
                            {
                                name: '数量',
                                type: 'pie',
                                radius : '70%',
                                center: ['40%', '50%'],
                                data:zhis,
                                itemStyle: {
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 2)'
                                    }
                                }
                            }
                        ]
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                })
            },

            onchange(){
                let a = this.zuoBiao;
                if(a==1){
                    this.shouhiei1=true;
                    this.shouhiei2=false;
                    this.shouhiei3=false;
                    this.sadasdasdsas();
                }else if(a==2){
                    this.shouhiei1=false;
                    this.shouhiei2=true;
                    this.shouhiei3=false;
                    this.asdsadadasd();
                }else if(a==3){
                    this.shouhiei1=false;
                    this.shouhiei2=false;
                    this.shouhiei3=true;
                    this.jiaZaiTongJiTus();
                }
            }
        },
        mounted(){
            this.sadasdasdsas();
            this.asdsadadasd();
            this.jiaZaiTongJiTus();
        }
    })
</script>
</body>
</html>
